<template>
  <div class="login-page">
    <div class="blurred-box">
      <a-spin :spinning="loginLoading">
        <div class="user-login-box">
          <img :src="avaterImg" class="user-icon" />
          <input v-model="state.username" class="m-input" placeholder="账号" />
          <input v-model="state.password" class="m-input" placeholder="密码" />
          <div class="button" @click="submitLogin">登 录</div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance } from "vue"
import useUser from "@/hooks/user"
import avaterImg from "@/assets/images/avater.jpg"
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const { login, loginLoading } = useUser()
    const state = reactive({
      username: "admin",
      password: "123456",
    })

    const submitLogin = () => {
      if (!state.username || !state.password) {
        return proxy.$message.error("请先输入账号和密码！")
      }
      login(state)
    }
    return { state, submitLogin, avaterImg, loginLoading }
  },
}
</script>

<style scoped lang="less">
/* CSS which you need for blurred box */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  letter-spacing: 0.02em;
  font-weight: 400;
  background: linear-gradient(-45deg, #f08463, #e9588f, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

.blurred-box {
  position: relative;
  width: 32rem;
  height: 40rem;
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
  border-radius: 0.8rem;
}

.blurred-box:after {
  content: "";
  width: 40rem;
  height: 40rem;
  background: inherit;
  position: absolute;
  left: -25px;
  leftpositionright: 0;
  top: -25px;
  toppositionbottom: 0;
  box-shadow: inset 0 0 0 40rem rgba(255, 255, 255, 0.2);
  filter: blur(1rem);
}

/* Form which you dont need */
.user-login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 4rem 2rem;
  text-align: center;
  z-index: 1;
  height: 100%;
}

.user-icon {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

.m-input {
  width: 25rem;
  height: 3.6rem;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  &::placeholder {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.2);
  }
}
.button {
  width: 25rem;
  margin: 1rem;
  padding: 0.8rem;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
  &:after {
    position: absolute;
    transition: 0.3s;
    content: "";
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    right: 0;
    left: auto;
    background: rgba(255, 255, 255, 0.3);
  }
  &:hover {
    cursor: pointer;
    &:after {
      width: 100%;
      left: 0;
    }
  }
}
</style>
